<style>

</style>
<template>
  <el-dialog
    title="埋点数据Mock"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    width="60%"
    :before-close="clearForm">

    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="saveData"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="traceId" prop="traceId">
        <el-input v-model="saveData.traceId"></el-input>
      </el-form-item>
      <el-form-item label="businessNo" prop="businessNo">
        <el-input v-model="saveData.businessNo"></el-input>
      </el-form-item>
      <el-form-item label="systemKey" prop="systemKey">
        <el-input v-model="saveData.systemKey"></el-input>
      </el-form-item>
      <el-form-item label="useCase" prop="useCase">
        <el-input v-model="saveData.useCase"></el-input>
      </el-form-item>
      <el-form-item label="module" prop="module">
        <el-input v-model="saveData.module"></el-input>
      </el-form-item>
      <el-form-item label="category" prop="category">
        <el-input v-model="saveData.category"></el-input>
      </el-form-item>
      <el-form-item label="subCategory" prop="subCategory">
        <el-input v-model="saveData.subCategory"></el-input>
      </el-form-item>
      <el-form-item label="message" prop="message">
        <el-input type="textarea"
                  :rows="3" v-model="saveData.message"></el-input>
      </el-form-item>
      <el-form-item label="loggerLevel" prop="loggerLevel">
        <el-select filterable v-model="saveData.loggerLevel" placeholder="请选择日志级别">
          <el-option
            v-for="item in loggerLevelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="uniqueKey" prop="uniqueKey">
        <el-input v-model="saveData.uniqueKey"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="clearForm">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>

import {buryingSave} from "@/api/burying";

export default {
  name: "buryingForm",
  filters: {},
  components: {},
  data() {
    return {
      loggerLevelOptions: [{
        label: "DEBUG",
        value: "DEBUG",
      }, {
        label: "INFO",
        value: "INFO",
      }, {
        label: "WARNING",
        value: "WARNING",
      }, {
        label: "ERROR",
        value: "ERROR",
      }
      ],
      labelPosition: 'right',
      dialogVisible: false,
      saveData: {
        traceId: '',
        businessNo: '',
        systemKey: '',
        useCase: '',
        module: '',
        category: '',
        subCategory: '',
        loggerLevel: '',
        message: '',
        uniqueKey: ''
      },
      rules: {
        traceId: [
          {required: true, message: '此项必填', trigger: 'blur'},
        ],
        businessNo: [
          {required: true, message: '此项必填', trigger: 'blur'},
        ],
        systemKey: [
          {required: true, message: '此项必填', trigger: 'blur'},
        ],
        useCase: [
          {required: true, message: '此项必填', trigger: 'blur'},
        ],
        module: [
          {required: true, message: '此项必填', trigger: 'blur'},
        ],
        message: [
          {required: true, message: '此项必填', trigger: 'blur'},
        ],
        loggerLevel: [
          {required: true, message: '此项必选', trigger: 'change'},
        ],
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    load(data) {
      let vm = this
      if (data) {
        vm.saveData = vm.$cloneObj(data)
      }
      vm.dialogVisible = true
    },
    save() {
      let vm = this
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          await vm.doSave(this.saveData)
        }
      })
    },
    async doSave(saveData) {
      let vm = this
      let ret = await buryingSave(saveData);
      if (ret.ok) {
        vm.$message({type: 'success', message: '保存成功'});
      } else {
        vm.$message({type: 'error', message: '保存失败：' + ret.message});
      }
      vm.clearForm()
      vm.$parent.query()
    },
    clearForm() {
      let vm = this
      try {
        vm.saveData = {
          traceId: '',
          businessNo: '',
          systemKey: '',
          useCase: '',
          module: '',
          category: '',
          subCategory: '',
          loggerLevel: '',
          message: '',
          uniqueKey: ''
        }
        vm.$refs['ruleForm'].resetFields()
      } catch (e) {
        console.log(e)
      }
      vm.dialogVisible = false
    }
  }
}
</script>
